new Vue({
    el:"#app",
    data:{
        webSocket: null,
        sn: null,
        pageTime: 5, //每页播放时长 秒
        intervalTimer: null,
        WodeGold: null
    },
    created: function(){
        var _this = this;
        window.addEventListener('beforeunload', function(e){_this.closeWebsocket(e)});
        if(this.intervalTimer) clearInterval(this.intervalTimer);
        if(this.webSocket) this.closeWebsocket();
    },
    beforeDestroy: function() {
        var _this = this;
        window.addEventListener('beforeunload', function(e){_this.closeWebsocket(e)});
        if(this.intervalTimer) clearInterval(this.intervalTimer);
        if(this.webSocket) this.closeWebsocket();
    },
    mounted: function() {
        var socketUrl = this.getQueryString("socketUrl");
        if(socketUrl){
            this.initWebSocket(socketUrl);
        }
        this.sn = this.getQueryString("sn");
        this.pageTime = this.getQueryString("pageTime");
        this.initData();
    },
    methods:{
        initWebSocket: function(socketUrl){
            //判断当前浏览器是否支持WebSocket
            if ("WebSocket" in window) {
                //初始化weosocket(必须)
                this.webSocket = new WebSocket(socketUrl); //新建一个webstock对象
                this.webSocket.onopen = this.websocketonopen;
                this.webSocket.onmessage = this.websocketonmessage;
                this.webSocket.onerror = this.websocketonerror;
                this.webSocket.onclose = this.websocketclose;
            } else {
                console("当前浏览器不支持 websocket");
            }
        },
        websocketonopen: function() {
            console.log("---连接建立成功---");
            //websocket连接后发送数据(send发送)
            var data = {
                type: 1000,
                sn: this.sn,
                param: null
            };
            this.websocketsend(data);
        },
        websocketonerror: function() {
            //连接建立失败重连
            console.log("-----websocket连接建立失败重连-----");
            this.initWebSocket();
        },
        websocketonmessage: function(e) {
            //数据接收
            console.log("-----websocket接收到的发送的数据-----");
            console.log(e.data);
            if(e.data){
                var message = JSON.parse(e.data);
                if(message && message.type == 1 && message.param && !this.intervalTimer){
                    this.startPlay();
                    this.WodeGold = message.param.WodeGold;
                    /* 初始化数据 */
                    this.initInterval();
                }
            }
        },
        websocketsend: function(Data) {
            //数据发送
            console.log("发送数据", Data);
            this.webSocket.send(JSON.stringify(Data));
        },
        websocketclose: function(e) {
            //关闭
            console.log("断开连接");
        },
        closeWebsocket: function(){
            this.webSocket.close();
        },
        initData: function() {
            var data = {
                type: 1,
                sn: this.sn,
                param: null
            };
            this.websocketsend(data);
        },
        startPlay: function(){
            var data = {
                type: 100,
                sn: this.sn,
                param: null
            };
            this.websocketsend(data);
        },
        swipingPlay: function(){
            var data = {
                type: 101,
                sn: this.sn,
                param: null
            };
            this.websocketsend(data);
        },
        endPlay: function(){
            var data = {
                type: 102,
                sn: this.sn,
                param: null
            };
            this.websocketsend(data);
        },
        initInterval: function(){
            var _this = this;
            this.intervalTimer = setInterval(function() {
                /* 轮播结束 */
                clearInterval(_this.intervalTimer);
                _this.endPlay();
            }, this.pageTime * 1000);
        },
        getQueryString: function(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return r[2];
            return null;
        }
    }
});
